<template>
  <div class="topp">
    <div class="top-left">
      <div class="left">
        <img class="leftImg" :src="this.product[0].goods_img" alt="" />
        <!-- 鼠标层罩 -->
        <div v-show="topShow" class="top" :style="topStyle"></div>
        <!-- 最顶层覆盖了整个原图空间的透明层罩 -->
        <div
          class="maskTop"
          @mouseenter="enterHandler"
          @mousemove="moveHandler"
          @mouseout="outHandler"
        ></div>
      </div>

      <div v-show="rShow" class="right">
        <img
          :style="r_img"
          class="rightImg"
          :src="this.product[0].goods_img"
          alt=""
        />
      </div>
    </div>
    <div class="top-right">
      <div>
        <h1>{{ this.product[0].goods_title }}</h1>
        <span style="font-size: 30px; font-weight: 700"
          >￥{{ this.product[0].goods_price }}
        </span>
        <p>尺码：</p>
        <div class="top-right-size">
          <el-radio
            v-model="radio1"
            label="1"
            class="elradio"
            border
            @click.native="changeGoodSize(0, $event)"
            >S</el-radio
          >
          <el-radio
            v-model="radio1"
            label="2"
            class="elradio"
            border
            @click.native="changeGoodSize(1, $event)"
            >M</el-radio
          >
          <el-radio
            v-model="radio1"
            label="3"
            class="elradio"
            border
            @click.native="changeGoodSize(2, $event)"
            >L</el-radio
          >
          <el-radio
            v-model="radio1"
            label="4"
            class="elradio"
            border
            @click.native="changeGoodSize(3, $event)"
            >XL</el-radio
          >
          <el-radio
            v-model="radio1"
            label="5"
            class="elradio"
            border
            @click.native="changeGoodSize(4, $event)"
            >2XL</el-radio
          >
        </div>
        <p>
          <svg
            style="width: 15px; height: 15px"
            t="1632834343735"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1824"
            width="200"
            height="200"
          >
            <path
              d="M743.207337 207.830419c-37.337373-1.143033-69.02098 31.842219-69.688175 68.623937-0.665149 37.765115 31.206746 70.52831 68.860321 70.767763 38.288025 0.222057 71.624271-31.558763 70.51296-69.116147C811.655266 235.910964 781.84431 209.019501 743.207337 207.830419zM743.142869 304.598346c-13.748119 0-25.493627-11.793604-25.875321-26.031886-0.475837-15.032368 11.208273-27.145244 26.003234-27.099195 14.44499 0.032746 25.52535 10.985192 25.810852 25.541723C769.367137 292.374954 757.905084 304.566624 743.142869 304.598346z"
              p-id="1825"
            ></path>
            <path
              d="M947.664939 282.136775C910.517901 245.118674 802.226522 133.920082 786.162662 114.41075c-13.939477-16.780175-28.861328-36.350906-50.322106-43.558052-28.859281-9.634428-48.004317 19.349697-66.353221 35.971259C644.468522 129.473817 162.847413 595.98274 76.110957 679.831426c-6.668886 6.443759-26.321482 28.683273-1.589195 53.432956 66.832128 66.797335 130.866536 136.056746 196.618053 203.982788 22.858614 23.699772 34.256198 23.589254 58.035788 0.665149 117.66077-113.51638 576.551178-557.721321 595.629699-575.291488C949.603081 339.712075 979.82643 314.155003 947.664939 282.136775zM867.152231 338.41043c-45.36828 44.192501-90.961688 88.166015-136.517233 132.168182C597.925487 598.637196 465.153554 726.658941 332.413344 854.654081c-23.809265 22.984481-39.145555 22.890336-61.782112-0.493234-37.810141-38.987966-75.590606-78.005608-113.119337-117.260657-16.920368-17.749246-18.159592-31.591509-6.28617-48.369637 18.542308 17.776875 37.210483 35.763528 56.037271 53.526077 13.811564 13.080923 33.177634 11.192923 36.892235-4.65195 1.77646-7.697309-1.651616-19.206434-6.984065-25.476231-16.22452-19.427468-34.511002-37.129642-52.702316-56.242955 4.095271-4.474918 53.494355-52.366671 55.717999-54.701856 18.85851 17.954931 37.46324 35.112706 55.432497 52.830229 8.445346 8.334829 17.303085 12.840446 28.764114 7.824199 13.557784-5.9055 16.064884-22.635533 4.476965-35.477003-17.460674-19.224854-35.845393-37.668924-55.051827-57.732889l41.463344-42.165332c0 0 94.386694 88.151689 98.484012 92.039229 12.539594 11.907191 25.430182 13.493316 34.158984 3.016707 9.588379-11.479449 6.92062-22.812565-3.047406-33.162284-26.001187-26.857694-51.875484-53.812603-77.656661-80.700997-4.316306-4.445242-8.53949-8.969279-13.524015-14.255679 4.031826-4.445242 20.572548-21.400403 22.382776-23.414269 18.635429 16.906042 35.114752 35.271318 53.084009 52.193733 13.586436 12.856819 25.524327 15.364943 35.367509 6.188956 10.128685-9.41237 9.015328-23.49204-4.76349-36.795021-17.07898-16.526395-35.240619-33.081443-53.844326-49.782823 3.745301-4.061502 56.987922-56.542784 57.780984-57.320497 20.572548 18.905582 39.401382 35.954887 57.908898 53.336766 10.288321 9.602705 20.892843 13.700023 32.766264 3.477194 10.667967-9.145287 10.730389-21.493523-1.873674-33.908274-18.129916-17.827017-37.588083-34.288944-57.335846-52.130288 8.506744-8.032954 18.222013-17.47807 19.589151-18.796088 19.23918 17.572214 38.129412 33.862225 56.287981 50.828642 13.93743 13.033851 25.305339 14.46341 35.430954 3.889587 8.826016-9.190313 7.81192-22.778796-4.412496-34.350342-18.096147-17.032932-37.589107-32.589233-56.44864-49.210795 137.02684-137.040143 156.423609-192.743816 201.475687-147.676387 41.970904 41.970904 82.799798 85.133959 123.756605 128.169101C886.233821 304.042691 884.708072 321.379545 867.152231 338.41043z"
              p-id="1826"
            ></path>
          </svg>
          尺码表
        </p>
        <p>
          推荐：<el-button
            type="text"
            @click="open"
            style="text-decoration: underline"
            >推荐尺码</el-button
          >
        </p>
        <span style="font-size: 14px; font-weight: 550">配送方式：</span>
        <input type="radio" id="kuaidi" checked />
        <label for="kuaidi"></label>
        <span style="font-size: 13px; font-weight: 550">快递配送</span>
        <!-- 计数器 -->
        <div style="margin-top: 13px; margin-bottom: 18px">
          <span style="font-size: 14px; font-weight: 550">数量：</span>
          <el-input-number
            v-model="num1"
            @change="handleChange"
            :min="1"
            :max="100"
            label="计数器"
          ></el-input-number>
        </div>

        <svg
          t="1633442099052"
          class="top-right-icon1"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2457"
          width="200"
          height="200"
        >
          <path
            d="M352.456912 832.032253c-35.434907 0-63.989249 28.554342-63.989249 63.989249 0 35.434907 28.554342 63.989249 63.989249 63.989249s63.989249-28.554342 63.989249-63.989249C416.446162 860.586595 387.891819 832.032253 352.456912 832.032253L352.456912 832.032253z"
            p-id="2458"
            fill="#ffffff"
          ></path>
          <path
            d="M800.55367 832.032253c-35.434907 0-63.989249 28.554342-63.989249 63.989249 0 35.434907 28.554342 63.989249 63.989249 63.989249s63.989249-28.554342 63.989249-63.989249C864.54292 860.586595 835.816563 832.032253 800.55367 832.032253L800.55367 832.032253z"
            p-id="2459"
            fill="#ffffff"
          ></path>
          <path
            d="M864.026877 800.037628 344.200235 800.037628c-46.099782 0-86.695112-36.466991-92.199563-83.082815l-54.356459-382.043339L166.853687 156.360826c-1.892155-15.653284-16.169326-28.382328-29.930455-28.382328L95.983874 127.978498c-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625l40.767344 0c46.615824 0 87.727196 36.466991 93.403662 83.082815l30.790526 177.86259L315.473879 708.698135c1.720141 14.793214 15.309256 27.350244 28.726356 27.350244l519.826642 0c17.717453 0 31.994625 14.277171 31.994625 31.994625S881.744331 800.037628 864.026877 800.037628z"
            p-id="2460"
            fill="#ffffff"
          ></path>
          <path
            d="M384.279523 672.05913c-16.685369 0-30.618512-12.729044-31.82261-29.586427-1.376113-17.545439 11.868974-33.026709 29.586427-34.230808l434.163615-31.994625c15.997312-0.172014 29.414413-12.55703 31.134554-26.834201l50.400134-288.295649c1.204099-10.664875-1.720141-22.533848-8.084663-29.758441-4.128339-4.644381-9.288762-7.052579-15.309256-7.052579L319.946246 224.3064c-17.717453 0-31.994625-14.277171-31.994625-31.994625S302.400806 159.973123 319.946246 159.973123l554.05745 0c24.426004 0 46.959852 10.148833 63.301193 28.554342 18.749538 21.157736 27.178229 50.744163 23.565933 81.706703l-50.400134 288.467663c-5.504452 44.895683-45.927768 81.362674-92.027549 81.362674l-431.755417 31.82261C385.82765 671.887116 384.967579 672.05913 384.279523 672.05913z"
            p-id="2461"
            fill="#ffffff"
          ></path>
        </svg>
        <!-- 添加到购物车 -->
        <el-button
          class="top-right-bt2"
          type="text"
          :plain="true"
          @click.prevent="addCart"
          >添加到购物车</el-button
        >
        <div style="margin-top: 20px; margin-bottom: 20px">
          <span style="font-size: 13px">支持七天无理由退货</span>
          <span
            style="
              font-size: 13px;
              margin-left: 13%;
              position: relative;
              cursor: pointer;
            "
          >
            <span
              class="fa fa-heart"
              @click="favorite"
              :style="{ color: favorite_color }"
            ></span>
            收藏</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  name: "Detailstop",
  data() {
    return {
      product: [],
      topStyle: { transform: "" },
      r_img: {},
      topShow: false,
      rShow: false,
      user_id: "",
      good_size: "",
      num1: 1,
      flag1: true,
      flag2: false,
      radio1: "7",
      favor_goods_id: "",
      favorite_state: "",
      favorite_color: "",
      addState: 1,
      state:""
    };
  },
  watch:{
    state:function(){
      this.favorite_color = "black"
    }
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    addCart() {
      if (this.good_size == "") {
        alert("请选择商品尺寸");
      } else {
        this.$axios
          .post("/api/product/addShopCart", {
            shopcart_goodsID: this.product[0].goods_id,
            shopcart_goods_img: this.product[0].goods_img,
            shopcart_goods_price: this.product[0].goods_price,
            shopcart_goods_title: this.product[0].goods_title,
            shopcart_goods_size: this.good_size,
            shopcart_count: this.num1,
            user_id: localStorage.getItem("user_id"),
            favorite_state: 1,
          })

          .then((res) => {
            this.$message({
              message: "添加购物车成功",
              type: "success",
            });
            this.addState += 1;
          })
          .then(() => {
            this.$bus.$emit("passOnAddState", this.addState);
          })
          .catch((err) => {
            console.log("err", err);
          });
      }
    },
    favorite() {
      this.$axios
        .get("/api/users/viewCollection", {
          params: {
            user_id: localStorage.getItem("user_id"),
          },
        })
        .then((res) => {
          if (res.data.results != undefined) {
            try {
              res.data.results.forEach((item) => {
                if (item.goods_id == this.product[0].goods_id) {
                  // res.data.results.forEach((item) => {
                  this.favor_goods_id = item.goods_id;
                  if (this.favor_goods_id == this.product[0].goods_id) {
                    this.$axios
                      .post("/api/users/delViewCollection", {
                        user_id: localStorage.getItem("user_id"),
                        goods_id: this.product[0].goods_id,
                      })
                      .then((res) => {
                        this.favorite_state = 0;
                        this.favorite_color = "black";
                        this.$message({
                          message: "取消收藏成功",
                          type: "primary",
                        });
                      })
                      .catch((err) => {
                        console.log("err", err);
                      });
                  }
                } else if (item.goods_id != this.product[0].goods_id) {
                  this.$axios
                    .post("/api/users/addCollection", {
                      user_id: localStorage.getItem("user_id"),
                      goods_id: this.product[0].goods_id,
                      goods_img: this.product[0].goods_img,
                      goods_price: this.product[0].goods_price,
                      goods_title: this.product[0].goods_title,
                      favorite_state: 1,
                    })
                    .then((res) => {
                      this.favorite_state = 1;
                      this.favorite_color = "red";
                      this.$message({
                        message: "收藏成功",
                        type: "success",
                      });
                    })
                    .catch((err) => {
                      console.log("err", err);
                    });
                  throw new Error("LoopTerminates");
                }
                // });
              });
            } catch (e) {
              if (e.message !== "LoopTerminates") throw e;
            }
          } else if (res.data.results == undefined) {
            this.$axios
              .post("/api/users/addCollection", {
                user_id: localStorage.getItem("user_id"),
                goods_id: this.product[0].goods_id,
                goods_img: this.product[0].goods_img,
                goods_price: this.product[0].goods_price,
                goods_title: this.product[0].goods_title,
                favorite_state: 1,
              })
              .then((res) => {
                this.favorite_state = 1;
                this.favorite_color = "red";
                this.$message({
                        message: "收藏成功",
                        type: "success",
                      });
              })
              .catch((err) => {
                console.log("err", err);
              });
          }
        })
        .then(() => {
          this.$bus.$emit("passOnState", this.favorite_state);
        });
    },
    // 鼠标进入原图空间函数
    enterHandler() {
      // 层罩及放大空间的显示
      this.topShow = true;
      this.rShow = true;
    },
    // 鼠标移动函数
    moveHandler(event) {
      // 鼠标的坐标位置
      let x = event.offsetX;
      let y = event.offsetY;
      // 层罩的左上角坐标位置，并对其进行限制：无法超出原图区域左上角
      let topX = x - 100 < 0 ? 0 : x - 100;
      let topY = y - 100 < 0 ? 0 : y - 100;
      // 对层罩位置再一次限制，保证层罩只能在原图区域空间内
      if (topX > 250) {
        topX = 250;
      }
      if (topY > 250) {
        topY = 250;
      }

      // 通过 transform 进行移动控制
      this.topStyle.transform = `translate(${topX}px,${topY}px)`;
      this.r_img.transform = `translate(-${2 * topX}px,-${2 * topY}px)`;
    },
    // 鼠标移出函数
    outHandler() {
      // 控制层罩与放大空间的隐藏
      this.topShow = false;
      this.rShow = false;
    },
    //弹框
    open() {
      this.$alert(
        ` <div>
        <table style="border-collapse: collapse;">
            <tr>
                <td colspan="3" style="border: 1px solid #000;text-align: center;width: 400px;height: 60px;background-color: #7d7d7d;color: #fff;">男士 / MAN</td>
                <td colspan="3" style="border: 1px solid #000;text-align: center;width: 400px;height: 60px;background-color: #7d7d7d;color: #fff;">女士 / WOMAN</td>
            </tr>
            <tr>
                <td style="border: 1px solid #000;text-align: center;height: 40px;background-color: #dadada;">尺码建议</td>
                <td style="border: 1px solid #000;text-align: center;height: 40px;">身高（cm）</td>
                <td style="border: 1px solid #000;text-align: center;height: 40px;">体重（斤）</td>
                <td style="border: 1px solid #000;text-align: center;height: 40px;background-color: #dadada;">尺码建议</td>
                <td style="border: 1px solid #000;text-align: center;height: 40px;">身高（cm）</td>
                <td style="border: 1px solid #000;text-align: center;height: 40px;">体重（斤）</td>
            </tr>
            <tr>
                <td style="border: 1px solid #000;text-align: center;background-color: #dadada;height: 40px;">S</td>
                <td style="border: 1px solid #000;text-align: center;height: 40px;">160-170</td>
                <td style="border: 1px solid #000;text-align: center;height: 40px;">90-110</td>
                <td style="border: 1px solid #000;text-align: center;background-color: #dadada;height: 40px;">S</td>
                <td style="border: 1px solid #000;text-align: center;height: 40px;">150-155</td>
                <td style="border: 1px solid #000;text-align: center;height: 40px;">80-90</td>
            </tr>
            <tr>
                <td style="border: 1px solid #000;text-align: center;background-color: #dadada;height: 40px;">M</td>
                <td style="border: 1px solid #000;text-align: center;height: 40px;">170-175</td>
                <td style="border: 1px solid #000;text-align: center;height: 40px;">110-130</td>
                <td style="border: 1px solid #000;text-align: center;background-color: #dadada;height: 40px;">M</td>
                <td style="border: 1px solid #000;text-align: center;height: 40px;">155-160</td>
                <td style="border: 1px solid #000;text-align: center;height: 40px;">90-100</td>
            </tr>
            <tr>
                <td style="border: 1px solid #000;text-align: center;background-color: #dadada;height: 40px;">L</td>
                <td style="border: 1px solid #000;text-align: center;height: 40px;">175-180</td>
                <td style="border: 1px solid #000;text-align: center;height: 40px;">130-150</td>
                <td style="border: 1px solid #000;text-align: center;background-color: #dadada;height: 40px;">L</td>
                <td style="border: 1px solid #000;text-align: center;height: 40px;">160-165</td>
                <td style="border: 1px solid #000;text-align: center;height: 40px;">100-110</td>
            </tr>
            <tr>
                <td style="border: 1px solid #000;text-align: center;background-color: #dadada;height: 40px;">XL</td>
                <td style="border: 1px solid #000;text-align: center;height: 40px;">180-185</td>
                <td style="border: 1px solid #000;text-align: center;height: 40px;">150-170</td>
                <td style="border: 1px solid #000;text-align: center;background-color: #dadada;height: 40px;">XL</td>
                <td style="border: 1px solid #000;text-align: center;height: 40px;">165-170</td>
                <td style="border: 1px solid #000;text-align: center;height: 40px;">110-120</td>
            </tr>
            <tr>
                <td style="border: 1px solid #000;text-align: center;background-color: #dadada;height: 40px;">2XL</td>
                <td style="border: 1px solid #000;text-align: center;height: 40px;">185-190</td>
                <td style="border: 1px solid #000;text-align: center;height: 40px;">170-190</td>
                <td style="border: 1px solid #000;text-align: center;background-color: #dadada;height: 40px;">2XL</td>
                <td style="border: 1px solid #000;text-align: center;height: 40px;">170-175</td>
                <td style="border: 1px solid #000;text-align: center;height: 40px;">120-140</td>
            </tr>
        </table>
    </div>`,
        "商品尺码",
        {
          dangerouslyUseHTMLString: true,
          showCancelButton: false,
          showConfirmButton: false,
        }
      );
    },
    changeGoodSize(index, el) {
      if (el.target.tagName === "INPUT") return;
      this.good_size = $(".elradio")[index].innerText;
    },
  },
  created() {
    this.$bus.$on("results", (res) => {
      this.product = res;
      this.$axios
        .post("/api/users/getFavState", {
          user_id: localStorage.getItem("user_id"),
          goods_id: this.product[0].goods_id,
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.favorite_state = res.data.results[0].favorite_state;
            this.favorite_color = "red";
          } else {
            this.favorite_color = "black";
            this.favorite_state = "0";
          }
        });
    });
  },
  mounted(){
    this.$bus.$on("shoucang",res=>{
      this.state = res
    })
  }
};
</script>

<style scoped>
.el-icon-minus:before {
  margin-right: -10px;
}
.el-icon-plus:before {
  margin-right: -10px;
}
.elradio {
  margin: 0;
}
.top-right > div {
  position: relative;
  top: 20px;
}
.topp {
  width: 85%;
  height: 100%;
  margin: 0 auto;
  margin-top: 10px;
  display: flex;
}
.topp .top-left {
  width: 49%;
  height: 100%;
  display: flex;
}
/* 放大的图片，通过定位将左上角定位到(0,0) */
.rightImg {
  display: inline-block;
  width: 800px;
  height: 800px;
  position: absolute;
  top: 0;
  left: 0;
}
/* 右边的区域图片放大空间 */
.right {
  width: 300px;
  height: 300px;
  position: absolute;
  z-index: 10;
  top: 290px;
  left: 730px;
  overflow: hidden;
}
/* 一个最高层层罩 */
.maskTop {
  width: 400px;
  height: 400px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}
/* 层罩，通过定位将左上角定位到(0,0) */
.top {
  width: 250px;
  height: 250px;
  background-color: lightcoral;
  opacity: 0.4;
  position: absolute;
  top: 0;
  left: 0;
}
/* 原图的显示 */
.leftImg {
  width: 500px;
  height: 500px;
  display: inline-block;
}
/* 原图的容器 */
.left {
  width: 502px;
  height: 502px;
  border: 1px solid teal;
  float: left;
  position: relative;
  margin-left: 90px;
}

.top .top-right {
  width: 47%;
  height: 100%;
  margin-left: 35px;
}
.top .top-right p {
  font-size: 14px;
  font-weight: 550;
  margin-top: 15px;
  cursor: default;
}
.top .top-right .top-right-color {
  margin-top: 9px;
  overflow: hidden;
}
.top .top-right .top-right-color ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.top .top-right .top-right-color ul li {
  width: 35px;
  height: 35px;
  margin-right: 10px;
  float: left;
  border: #ccc solid 1px;
  cursor: pointer;
}
.top .top-right .top-right-color ul li:nth-child(1) {
  background-color: white;
}
.top .top-right .top-right-color ul li:nth-child(2) {
  background-color: #000;
}
.top .top-right .top-right-color ul li:nth-child(3) {
  background-color: rgb(8, 7, 92);
}
.top .top-right .top-right-color ul li:nth-child(4) {
  background-color: rgba(100, 92, 92, 0.253);
}

.top-right-bt1 {
  width: 40%;
  height: 60px;
  background-color: #fff;
  border: #000 solid 1px;
  color: #000;
  font-weight: 600;
  font-size: 15px;
}
.top-right-bt1:hover {
  background-color: #dcdcdc;
  color: #363636;
  border: 1px solid #363636;
}

.top-right-icon1 {
  width: 16px;
  height: 16px;
  position: relative;
  right: -30px;
  top: -2px;
}
.top-right-bt2 {
  margin-left: -15px;
  width: 40%;
  height: 60px;
  background-color: #000;
  border: #000 solid 1px;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
}
.top-right-bt2:hover {
  background-color: #363636;
  color: #ccc;
}
.el-icon-minus:before {
  margin-right: -10px;
}
.el-icon-plus:before {
  margin-right: -10px;
}
</style>